import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Table , Modal, Menu, Icon, Button, message} from 'antd';
import Query from './Query';
import Toggles from '../../components/Toggles';
import styles from './index.less';
import classnames from 'classnames';
import { Link } from 'dva/router';
import DropOption  from '../../components/DropOption/DropOption';
import QueueAnim from 'rc-queue-anim';

const confirm = Modal.confirm

function List ({
  customerInformation: {
    list,
    load,
    record,
    index,
    selectedRowKeys,
    selectedRows
  },
    onSearch,
    onDeleteItem,
    onDeleteItem1,
    onEditItem,
    onEditItem1,
    onCreate,
    onInvalid,
    onInvalid1,
    onInsertItem,
    location,
    dispatch,
    onLock
  }){

  const handleMenuClick = (record, e) => {
    if (e.key === '1') { //修改
          onEditItem(record)
    }else if (e.key === '2') { //删除
      confirm({
        title: '您确定删除吗?',
        onOk () {
          const c = record.id;
          const id = transform({c});
          onDeleteItem(id)
        },
      })
    }else if(e.key==='3'){ //查看
      onLock(record.id)
    }
  }
  //对象转数组
  function transform(obj){
      var arr = [];
      for(var item in obj){
          arr.push(obj[item]);
      }
      return arr;
  }

  //毫秒数日期操作
   function getzf(num){
       if(parseInt(num) < 10){
           num = '0'+num;
       }
       return num;
     }
   function getMyDate(str){
       var oDate = new Date(str),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth()+1,
        oDay = oDate.getDate(),
        oHour = oDate.getHours(),
        oMin = oDate.getMinutes(),
        oSen = oDate.getSeconds(),
        oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
          return oTime;
    };
  function createHandler(values) {
       onCreate(values)
  }
  //复选框
  const rowSelection = {
       onChange: (selectedRowKeys, selectedRows) => {
         dispatch({
           type:'customerInformation/save',
           payload:{record:selectedRows,selectedRowKeys}
         })
       },
       type: 'checkbox',
       selectedRowKeys:selectedRowKeys
     }

  const columns = [
    {
      title: '客户编号',
      dataIndex:'customerNum',
      key: 'customerNum',

    },{
      title: '客户中文名称',
      dataIndex:'customerName',
      key: 'customerName',

    }, {
      title: '客户英文名称',
      dataIndex:'customerEname',
      key: 'customerEname',

    },{
      title: '客户简称',
      dataIndex:'customerAbbreviation',
      key: 'customerAbbreviation',

    },{
      title: '客户性质',
      dataIndex: 'customerProperty',
      key: 'customerProperty',
      render: (text) => {
        let value;
        if(text===1) {
            value= '企业'
        }
        if (text===2){
          value= '代表处'
        }
        if(text===3){
          value= '无机构'
        }
        return<span>{value}</span>
      },
    }, {
      title: '客户类型',
      dataIndex: 'customerType',
      key: 'customerType',

      render: (text) => {
        let value;
        if(text===1) {
          value= '国家'
        }
        if (text===2){
          value= '集体'
        }
        if(text===3){
          value= '民营'
        }
        if(text===4){
          value= '外资'
        }
        if(text===5){
          value= '侨资'
        }
        if(text===6){
          value= '合资'
        }
        if(text===7){
          value= '中资'
        }
        if(text===8){
          value= '其他'
        }
        return<span>{value}</span>
      },
    },{
       title: '行业类别',
       dataIndex: 'industryCategory',
       key: 'industryCategory',

       render: (text) => {
         let value;
         if(text===1) {
             value= '房地产/建筑/物业/装饰房屋中介'
         }
         if(text===2) {
             value= '金融/保险/证券/投资'
         }
         if(text===3) {
             value= '医疗医药'
         }
         if(text===4) {
             value= '物流运输'
         }
         if(text===5) {
             value= '工厂制造业'
         }
         if(text===6) {
             value= '汽车自动化'
         }
         if(text===7) {
             value= '化工与能源'
         }
         if(text===8) {
             value= '百货/连锁'
         }
         if(text===9) {
             value= '快销/耐销'
         }
         if(text===10) {
             value= '广告/多媒体'
         }
         if(text===11) {
             value= '服务/教育/培训'
         }
         if(text===12) {
             value= '其他'
         }
           return<span>{value}</span>
       },

       },{
          title: '公司网址',
          dataIndex: 'companyWebsite',
          key: 'companyWebsite',

      },{
         title: '注册地址',
         dataIndex: 'registeredAddress',
         key: 'registeredAddress',

     },{
        title: '英文注册地址',
        dataIndex: 'registeredEaddress',
        key: 'registeredEaddress',

     },{
       title: '法人代表',
       dataIndex: 'legalRepresentative',
       key: 'legalRepresentative',

     },{
       title: '联系部门',
       dataIndex: 'contactDepartment',
       key: 'contactDepartment',

     },{
       title: '联系地址',
       dataIndex: 'contactAaddress',
       key: 'contactAaddress',

     },{
        title: '联系邮编',
        dataIndex: 'contactZipCode',
        key: 'contactZipCode',

      },{
         title: '联系电话1',
         dataIndex: 'telephone',
         key: 'telephone',

      },{
        title: '联系电话2',
        dataIndex: 'telephoneOther',
        key: 'telephoneOther',

      },{
        title: '传真',
        dataIndex: 'fax',
        key: 'fax',

      },{
         title: 'EMAIL',
         dataIndex: 'email',
         key: 'email',

       },{
         title: '备注',
         dataIndex: 'remark',
         key: 'remark',

        },{
           title: '销售',
           dataIndex: 'market',
           key:'market',
        },{
           title: '成立日期',
           dataIndex: 'establishDate',
           key:'establishDate',
       },{
          title: '营业范围',
          dataIndex: 'businessScope',
          key:'businessScope',
       },{
          title: '客户情况简介',
          dataIndex: 'customerProfile',
          key:'customerProfile',
       },{
          title: '是否有不良记录',
          dataIndex: 'isBadRecord',
          key:'isBadRecord',
          render: ( text ) => {
            let value;
            if (text === 1) {
              value = '是'
            }
            if (text === 0) {
              value = '否'
            }
            return <span>{value}</span>
          },
        },{
           title: '组织机构代码',
           dataIndex: 'organizationCode',
           key:'organizationCode',
      },{
         title: '在服状态',
         dataIndex: 'isServing',
         key: 'isServing',
         render: ( text ) => {
           let value;
           if (text === 1) {
             value = '在服'
           }
           if (text === 0) {
             value = '停服'
           }
           return <span>{value}</span>
         },

      },{
         title: '创建时间',
         dataIndex: 'createTime',
         key: 'createTime',
         render:(text)=>text?<span>{getMyDate(text)}</span>:''
       },{
          title: '变更人',
          dataIndex: 'operator',
          key: 'operator',
      },{
        title: '变更时间',
        dataIndex: 'modifyTime',
        key: 'modifyTime',
        render:(text)=>text?<span>{getMyDate(text)}</span>:''
      },{
         title: '操作',
         key: 'operation',
         width: 30,
         fixed:'right',
         render: (text, record) => {
           return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '2', name: '删除' },
                                                                                          { key: '1', name: '修改' },
                                                                                          { key: '3', name: '查看' },
                                                                                        ]} />
         },
       },
  ]

  return (
    <div className="content-inner">
      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>



      <div style={{padding: '7px'}}>
          <Button onClick={onCreate} type='primary' style={{ marginRight: 5}}  icon="file-add" >新增客户</Button>

          <Button  style={{ marginRight: 5 }} type='primary' onClick={()=>onDeleteItem1(selectedRowKeys)} icon="delete">删除</Button>

          <Button onClick={onEditItem1} type='primary' style={{ marginRight: 5}} icon="edit">修改客户</Button>

          <Button onClick={onLock} style={{ marginRight: 5}} type='primary' icon="file-text">查看客户</Button>

          <Button  onClick={onInvalid1} type='primary' style={{ marginRight: 5}}  icon="file-text">撤户</Button>

      </div>
       <div style={{'background': 'white'}}>
        <QueueAnim//进场动画，每个子标签必须带 key，如果未设置 key 将不执行动画。
          type={'right'}
          delay={30}
          duration={1000}
          ease={'easeInQuart'}
        >
          <Table
            key='1'
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: total => `共 ${total} 条`,
              pageSizeOptions:['5','10','15','20'],
              defaultPageSize:5,
            }}
            rowSelection={rowSelection}
            loading={load}
            dataSource={list}
            className = {styles.table}
            size={'small'}
            style={{width:'100%'}}
            rowKey={record => record.id}
            columns={columns}
            scroll={{ x:'180%'}}
          />
        </QueueAnim>
      </div>
    </div>
  );
}

List.propTypes = {
  customerInformation: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
